/*
 * 监控区主页的上边导航栏
 * 需要依赖 Vue
 * @author Zdream
 * @since 0.2.0
 */

monitor.ui.top = {
	
	/**
	 * 存储哪类屏幕（后面版本的组）对应的 HTML 的位置.
	 * 映射关系: integer / string - string
	 * 
	 * key: integer / string
	 *   它可能是以下几类中的某一类:
	 *   1. 屏幕的工程号 pid (integer)
	 *   2. 屏幕所在组组 ID (integer)
	 *   3. 0, (integer) 特殊值, 表示概况, 指当侧边栏选择【概况】时;
	 *   4. "default", (string) 特殊值, 当屏幕对应的工程没有指定的导航栏时.
	 * 
	 * value: string
	 *   指应该加载的网页位置
	 */
	loadhtmls : {
		0 : '/html/monitor/top-setting.html',
		1 : '/html/monitor/top-general.html',
		'default' : '/html/monitor/top-default-project.html'
	},
	
	state : {
		/**
		 * string | integer
		 * 选中的是什么. 默认 0
		 */
		selected : 0,
		
		/**
		 * aside 的选中的 type
		 */
		aside : 'general'
	},
	
	init : function () {
		this.chooseHtml = this.chooseHtml.bind(this);
		
		// subcribe
		var thiz = this;
		monitor.msgCenter.subscribe(
				["aside-selected", "window-onload"],
		function(event, argv) {
			switch (event) {
			case "aside-selected": {
				thiz.onAsideSelected(argv);
				thiz.releaseTopSelected(argv);
			} break;
			case "window-onload": {
				// init ui
				thiz.onAsideSelected({type:'general'});
				thiz.release("top-selected", {
					aside : 'general', // 事件 aside-selected: type
					top : '0'
				});
			} break;
			}
		});
	},
	
	/**
	 * 当侧边栏选中的时候
	 */
	onAsideSelected : function (data) {
		// vm.destroy
		if (this.vm != null) {
			this.vm.$destroy();
		}
		
		this.rebuildState(data);
		
		// load html
		var thiz = this;
		$("#mnt_nav").load(this.chooseHtml(data), function() {
			thiz.vm = new Vue({
				data: thiz.state,
				methods: {
					buttonSelected: thiz.buttonSelected
				}
			});
			
			thiz.vm.$mount("#mnt_nav");
		});
	},
	
	/**
	 * 发送 top-selected 事件
	 */
	releaseTopSelected : function (data) {
		var argv = {
			aside : data.type,
			top : this.state.selected
		};
		
		switch (data.type) {
		case "screen":
			argv.sid = data.sid;
			break;
		}
		
		this.release("top-selected", argv);
	},
	
	/**
	 * 选择 load 的是哪个 HTML
	 */
	chooseHtml : function (data) {
		switch (data.type) {
		case "setting":
			return this.loadhtmls[0];
		case "general":
			return this.loadhtmls[1];
		case "screen":
			return this.loadhtmls['default'];
		}
		
		return this.loadhtmls[0];
	},
	
	/**
	 * 重建 state
	 */
	rebuildState : function (data) {
		var state = {
			selected : 0,
			aside : data.type
		};
		
		switch (data.type) {
		case "screen":
			state.sid = data.sid;
			break;
		}
		
		this.state = state;
	},
	
	/**
	 * 点击事件
	 */
	buttonSelected : function (data) {
		// ui
		this["selected"] = data;
		
		// message
		var argv = {
			aside : this.aside,
			top : this.selected
		};
		
		switch (argv.aside) {
		case "screen":
			argv.sid = this.sid;
			break;
		}
		
		monitor.ui.top.release("top-selected", argv);
	},
	
	/**
	 * 顶端栏会产生的消息种类有:
	 * 1. 点击事件 top-selected
	 *    点到顶端哪个按钮（或者默认, 0）
	 * @param event
	 *    string, 这里必须等于 "top-selected"
	 * @param argv
	 *    任意类型, 可以为 null
	 */
	release : function(event, argv) {
		monitor.msgCenter.release(event, argv);
	}
	
}

/*$("#mnt_nav").load(monitor.ui.top.loadhtmls['default'], function() {
	// monitor.ui.top.vm.$mount("#mnt_nav");
});*/

monitor.ui.top.init();
